<template>
	<view class="contract uni-flex-column">
		<view class="content">

			<view class="BankCard-box">
				<view class="BankCard-bg" v-for="(item,index) in BankCardList" :key='index'
					:style="{backgroundColor:item.bgColor}">
					<view class="card-content">
						<view class="card-content-top">
							<view class="bankLogo-box">
								<image :src="item.iconUrl" class="bank-icon"></image>
							</view>
							<view class="card-content-top-rt">
								<view class="bank-name-box">
									<text class="bank-name">{{item.BankCardName}}</text>

								</view>
								<text class="card-type">{{item.BankCardType}}</text>
							</view>

						</view>
						<text class="card-number">**** **** **** 0912</text>
					</view>
				</view>
			</view>
			<view class="publishDemand-content">
				<view class="formLabel uni-flex border-bottom uni-justify-between bankCode" @click="() => queryCardNum(0)">
					<text>查看卡号</text>
					<view class="uni-flex uni-align-center">

						<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#666666"></uni-icons>
					</view>
				</view>
				<view class="formLabel uni-flex border-bottom uni-justify-between">
					<text>交易明细</text>
					<view class="uni-flex uni-align-center">

						<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#666666"></uni-icons>
					</view>
				</view>
				<view class="formLabel uni-flex uni-justify-between" @click="goUnbindBandCard">
					<text>解除绑定</text>
					<view class="uni-flex uni-align-center">
						<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#666666"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 将弹出层移到外面，避免重复渲染 -->
			<uni-popup ref="CardNumPopup" type="dialog">
				<view class="popup-content">
					<text class='text'>银行卡号</text>
					<text class='text2'>6216 2938 0005 2819 928</text>
					<button type="default" class='copyCardNum' @click="copyCardNumber">复制卡号</button>
				</view>
			</uni-popup>

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ImgBaseUrl
	} from '@/utils/domain.js'
	const CardNumPopup = ref(null);
	const currentCardIndex = ref(-1);
	const currentCardNumber = ref('');
	const BankCardList = ref([{
			BankCardName: "中国银行",
			BankCardType: "储蓄卡",
			bgColor: "#FF6266", // 背景颜色
			iconUrl: `${ImgBaseUrl}/BankofChinaLogo.png`, // 银行图标URL
			fullCardNumber: '6216 2938 0005 2819 928'
		},

	])

	// 查看卡号方法
		const queryCardNum = (index) => {
			if (index >= 0 && index < BankCardList.value.length) {
				currentCardNumber.value = BankCardList.value[index].fullCardNumber;
				CardNumPopup.value.open();
			}
		}
	// 复制卡号功能
	const copyCardNumber = () => {
		uni.setClipboardData({
			data: currentCardNumber.value.replace(/\s+/g, ''), // 移除空格
			success: () => {
				uni.showToast({
					title: '卡号已复制',
					icon: 'success'
				});
				CardNumPopup.value.close(); // 复制后关闭弹窗
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}
	const dialogInputConfirm = (value) => {
		uni.showToast({
			title: `查看卡号: ${BankCardList.value[currentCardIndex.value].BankCardName} 的完整卡号`,
			icon: 'none'
		})
	}


	onMounted(() => {
		// 可以在这里添加数据加载逻辑
	})
	// 跳转到解绑银行卡页面
	const goUnbindBandCard = (() => {
		uni.navigateTo({
			url: '/pages/personalCenter/Universal/UnbindBankCard'
		})
	})
</script>

<style scoped lang="scss">
	.contract {
		height: 100vh;
		background: #F5F5F5;

		.content {
			padding: 20rpx;
			box-sizing: border-box;
			height: calc(100% - 100rpx); // 减去导航栏高度

			.title-box {
				margin-bottom: 30rpx;

				.title-text {
					color: #303133;
					font-size: 36rpx;
					font-weight: 500;
				}

				.title-text2 {
					color: #999;
					font-size: 24rpx;
				}
			}

			.BankCard-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 20rpx; // 卡片间距
			}

			.BankCard-bg {
				width: 100%;
				height: 215rpx;
				background: #FF6266;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.card-content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.card-number {
						color: #fff;
						font-size: 32rpx;
						font-weight: 500;
					}

					.card-content-top {
						display: flex;

						.bankLogo-box {
							height: 100%;
							width: 100rpx;

							.bank-icon {
								width: 74rpx;
								height: 74rpx;
							}
						}

						.card-content-top-rt {
							width: 100%;


							.bank-name-box {
								display: flex;
								justify-content: space-between;

								.bank-name {
									color: #fff;
									font-size: 32rpx;
									font-weight: 500;
								}


							}


							.card-type {
								color: rgba(255, 255, 255, 0.8);
								font-size: 28rpx;
							}
						}

					}


					.Divider {
						width: 100%;
						border: 0.5rpx solid #FF8B8E;
					}

					.bankContent-bottom {
						width: 100%;
						display: flex;
						justify-content: space-around;
						align-items: center;

						.bankContent-bottom-text-Divider {
							height: 20rpx;
							border: 1rpx solid #FF8B8E;
						}

						.bankContent-bottom-text {
							width: 30%;
							display: flex;
							justify-content: space-around;
							align-items: center;
							font-size: 28rpx;
							color: #FFFFFF;
							font-weight: 400;
						}
					}
				}
			}

			.publishDemand-content {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 26rpx 0 23rpx;
				margin-top: 30rpx;

				.border-bottom {
					border-bottom: 1px solid #E2E2E2;
				}

				.formLabel {
					padding: 24rpx 0;

					.slectBank {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}

					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;
						line-height: 70rpx;
					}
				}

			}
		}
	}

	.popup-content {
		width: 547rpx;
		height: 323rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 0rpx;
		box-sizing: border-box;
		flex-direction: column;

		.text {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}

		.text2 {
			font-size: 32rpx;
			color: #333333;
			font-weight: normal;
		}

		.copyCardNum {
			color: #fff;
			width: 496rpx;
			height: 68rpx;
			background: #2F80ED;
			border-radius: 44rpx;
			line-height: 68rpx;
		}
	}
</style>